import { useEffect, useState } from 'react'
import { observer } from 'mobx-react-lite'
import * as _ from 'lodash-es'
import Tree from 'rc-tree'
import 'rc-tree/assets/index.css'

const MyTree = observer(
	({
		isOpenAll,
		expandTreeLeafs,
		checkedLeafs,
		isCheckedAll,
		treeData,
		onCheck,
	}: {
		isOpenAll: boolean
		isCheckedAll: boolean
		expandTreeLeafs: any
		checkedLeafs: any
		treeData: any
		onCheck: any
	}) => {
		const [checked, setChecked] = useState([])
		const [expanded, setExpanded] = useState([])

		useEffect(() => {
			setExpanded(isOpenAll ? expandTreeLeafs : [])
		}, [expandTreeLeafs])

		useEffect(() => {
			setChecked(isCheckedAll ? checkedLeafs : [])
		}, [isCheckedAll])

		const handleCheck = (boxChecked: any, e: any) => {
			onCheck(boxChecked, e.node)
			setChecked(boxChecked)
		}

		const handleExpand = (expanded: any) => {
			setExpanded(expanded)
		}

		return (
			<Tree
				treeData={treeData}
				checkedKeys={checked}
				expandedKeys={expanded}
				onCheck={handleCheck}
				onExpand={handleExpand}
				checkable={true}
				virtual={true}
			>
				{/* {treeData.map((node: any, i: number) => {
					return <TreeNode title={node.title} checked={node.checked} key={node.key} checkable></TreeNode>
				})} */}
			</Tree>
		)
	}
)

export default MyTree
